<template>
	<view>
		<view class="album_bg">
			<image :src="album.cover" mode="widthFix"></image>
			<view class="album_info">
				<view class="album_name">{{album.name}}</view>
				<view class="album_btn">关注专辑</view>
			</view>
		</view>

		<view class="album_author">
			<view class="album_author_info">
				<image :src="album.user.avatar" mode="widthFix"></image>
				<view class="author_name">{{album.user.name}}</view>
			</view>
			<view class="album_author_desc">
				<text>{{album.desc}}</text>
			</view>
		</view>


		<view class="album_list">
			<view class="album_item" v-for="(item,index) in wallpaper" :key="item.id">
				<get-detail :list="wallpaper" :index="index">
					<image :src="item.thumb+item.rule.replace('$<Height>',360)" mode="aspectFill"></image>
				</get-detail>
			</view>
		</view>


	</view>
</template>

<script>
	import getDetail from '@/components/getDetail/getDetail.vue';
	export default {
		components: {
			getDetail
		},
		onLoad(it) {
			this.id = it.id;
			// this.id='5d0080a9e7bce7213b649609';
			this.getList()
		},
		data() {
			return {
				params: {
					limit: 30,
					order: 'new',
					skip: 0,
					first: 1
				},
				id: -1,
				album: {},
				wallpaper: [],
				hasMore: true
			};
		},

		onReachBottom() {
			if (this.hasMore) {
				this.params.first = 0;
				this.params.skip += this.params.limit;
				this.getList()
			}
		},
		methods: {
			getList() {
				this.request({
					url: `http://157.122.54.189:9088/image/v1/wallpaper/album/${this.id}/wallpaper`,
					data: this.params
				}).then(res => {
					if (Object.keys(this.album).length === 0) {
						this.album = res.res.album;
					}

					if (res.res.wallpaper.length === 0) {
						this.hasMore = false;
						uni.showToast({
							title: '没有更多数据',
							icon: 'none'
						})
						return;
					}
					this.wallpaper = [...this.wallpaper, ...res.res.wallpaper];
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.album_bg {
		position: relative;

		image {}

		.album_info {
			position: absolute;
			width: 100%;
			left: 0;
			bottom: 0;
			display: flex;
			justify-content: space-between;
			height: 80rpx;
			align-items: center;
			color: #fff;
			padding: 0 15rpx;

			.album_name {
				font-size: 30rpx;
				opacity: 0.7;
			}

			.album_btn {
				background-color: #d52a7e;
				width: 152rpx;
				height: 50rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 10rpx;
			}
		}
	}

	.album_author {
		padding: 10rpx;

		.album_author_info {
			padding: 10rpx 0;
			display: flex;

			image {
				width: 50rpx;
			}

			.author_name {
				color: #000;
				margin-left: 15rpx;
			}
		}

		.album_author_desc {}

	}

	.album_list {
		display: flex;
		flex-wrap: wrap;

		.album_item {
			width: 33.33%;
			border: 1rpx solid #fff;

			image {
				height: 160rpx;
			}
		}
	}
</style>
